﻿<div class="blocking-layer"></div>
<div class="cz-form-header">
    <ul>
        <li class="cz-form-nav"></li>
        <li class="cz-form-title">Profile</li>
        <li class="cz-form-close-btn"><a class="cz-form-btn">X</a></li>
    </ul>
</div>
<div class="cz-form-content">
    <div>
        <label for="username">Username</label>
        <input type="text" name="username" id="username" class="cz-input cz-form-username" maxlength="20" required placeholder="Enter a username" pattern="^[a-z0-9\-_]{4,20}$" title="Username" />
    </div>

    <div>
        <label for="email">E-mail</label>
        <input type="text" name="email" id="email" class="cz-input cz-form-email" required placeholder="Enter a valid email address" title="Username" pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,4}$" />
    </div>

    <div>The display name is used in the url and credits</div>

    <div class="czform_cb_div">
        <input type="checkbox" name="agreement" id="agreement" class="styled cz-form-agree" />
        <label for="username">by providing my email I understand that Chronozoom may contact me about my account</label>
    </div>
    <div>
        <button class="cz-button profile-form-button" id="cz-form-save">save and close</button>
        <button class="cz-button profile-form-button" id="cz-form-logout">sign out</button>
    </div>

    <div class="czform_text">
        <a href="http://chronozoomproject.org" target="_blank">ChronoZoomProject.org privacy policy.</a>
        ChronoZoom is an open source project owned by the <a href="http://www.outercurve.org/" target="_blank">OuterCurve Foundation</a>
    </div>

</div>
